<template>
	<view class="page">
		<view class="header">
			<view class="logo">
				<image src="../../static/login/logo.png" />
			</view>
		</view>

		<view class="login">
			<view class="title"><text>登录</text></view>

			<template v-if="type === 0">
				<view class="block">
					<view class="icon">
						<image src="/static/login/mobile.png" />
					</view>
					<view class="input">
						<input v-model="form_username" placeholder="姓名" type="text" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/login/lock.png" />
					</view>
					<view class="input">
						<input v-model="form_password" placeholder="请输入密码" type="password" />
					</view>
				</view>
			</template>

			<template v-if="type === 1">
				<view class="block">
					<view class="icon">
						<image src="/static/login/xm.png" />
					</view>
					<view class="input">
						<input v-model="form_username" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/login/mobile.png" />
					</view>
					<view class="input">
						<input v-model="form_tel" type="tel" maxlength="11" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/login/lock.png" />
					</view>
					<view class="input">
						<input v-model="form_password" placeholder="请输入密码" type="password" />
					</view>
					<!-- 					<view class="send-button" @click="sendCode()">
						<text v-if="!send_count_down">发送验证码</text>
						<text v-else>重新发送 {{send_count_down}} S</text>
					</view> -->
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/login/sfz.png" />
					</view>
					<view class="input">
						<input v-model="form_idcard" maxlength="18" placeholder="请输入身份证号码" />
					</view>
				</view>
			</template>
			<!-- 			<template v-if="type === 1">
				<view class="block">
					<view class="icon">
						<image src="/static/login/mobile.png"/>
					</view>
					<view class="input">
						<input v-model="form_tel" type="tel" maxlength="11" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/login/lock.png"/>
					</view>
					<view class="input">
						<input v-model="form_code" placeholder="请输入验证码" type="number"/>
					</view>
					<view class="send-button" @click="sendCode()">
						<text v-if="!send_count_down">发送验证码</text>
						<text v-else>重新发送 {{send_count_down}} S</text>
					</view>
				</view>
			</template> -->

			<view class="change-type">
				<text v-if="type === 0" @click="changeType()">注册账号</text>
				<text v-else @click="changeType()">登录账号</text>
			</view>

			<view class="button" @click="login()"><text>{{type==0?'登录':'注册'}}</text></view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/request.js'
	import Cookies from "js-cookie";
	import {
		setToken
	} from "@/utils/auth.js"
	import {
		encrypt,
		decrypt
	} from "@/utils/jsencrypt.js"
	export default {
		data() {
			return {
				type: 0, // 0 用户密码登录  1 验证码登录
				form_username: '',
				form_password: '',
				form_tel: '',
				form_idcard: '',
				form_code: '',
				send_count_down: 0, // 验证码重新发送等待倒计时
			}
		},
		onLoad() {
			this.getCookie()
		},
		methods: {
			getCookie() {
				const username = Cookies.get("username");
				const password = Cookies.get("password");
				this.form_username = username === undefined ? this.loginForm.username : username
				this.form_password = password === undefined ? this.loginForm.password : decrypt(password)
			},
			changeType() {
				this.type = this.type ? 0 : 1
			},
			sendCode() {
				if (this.send_count_down === 0) {
					// 验证手机号规则 调用发送验证码接口
					let countDown = 60
					this.send_count_down = countDown
					let timer = setInterval(() => {
						countDown--
						this.send_count_down = countDown
						if (countDown === 0) {
							clearInterval(timer)
						}
					}, 1000)
				}
			},
			login() {
				let {
					form_username,
					form_password,
					form_idcard,
					form_tel
				} = this
				if (this.type === 0) {
					// 用户密码登录
					if (!form_username) {
						uni.showToast({
							title: '请输入姓名',
							duration: 2000
						});
						return
					}
					if (!form_password) {
						uni.showToast({
							title: '请输入密码',
							duration: 2000
						});
						return
					}
					let data = {
						username: form_username,
						password: form_password,
					}
					api.request({
						url: '/login',
						method: 'post',
						data
					}).then(res => {
						console.log(res)
						if (res.code == 200) {
							uni.showToast({
								title: "登录成功",
								duration: 2000
							});
							uni.navigateTo({
								url: '/pages/index/index'
							})
							setToken(res.token)
						}
					})
				} else {
					// 注册
					if (!this.form_username) {
						uni.showToast({
							title: '请输入姓名',
							duration: 2000
						});
						return
					}
					if (!this.form_password) {
						uni.showToast({
							title: '请输入密码',
							duration: 2000
						});
						return
					}
					if (!this.form_idcard || this.form_idcard.length < 18) {
						uni.showToast({
							title: '请输入18位身份证号码',
							duration: 2000
						});
						return
					}
					if (!this.form_tel || this.form_tel.length != 11) {
						uni.showToast({
							title: '请输入11位手机号',
							duration: 2000
						});
						return
					}
					let data = {
						username: form_username,
						password: form_password,
						idCard: form_idcard,
						phonenumber: form_tel
					}

					uni.setStorageSync('userInfo', data)
					api.request({
						url: '/register',
						method: 'post',
						data
					}).then(res => {
						if (res.code == 200) {
							this.type = 0
						}
						uni.showToast({
							title: "注册成功",
							duration: 2000
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>